<template>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" @click="navigateTo('/colleges')">学院列表</el-menu-item>
          <el-menu-item index="2" @click="navigateTo('/majors')">专业列表</el-menu-item>
          <el-menu-item index="3" @click="navigateTo('/classes')">班级列表</el-menu-item>
          <el-menu-item index="4" @click="navigateTo('/students')">学生列表</el-menu-item>
          <el-menu-item index="5" @click="navigateTo('/testRecords')">测试记录</el-menu-item>
          <el-menu-item index="6" @click="navigateTo('/questions')">题目列表</el-menu-item>
          <el-menu-item index="7" @click="navigateTo('/test')">MBTI测试</el-menu-item>
          <el-menu-item index="8" @click="navigateTo('/testResults')">测试结果</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeIndex: '1'
      };
    },
    methods: {
      navigateTo(path) {
        this.$router.push(path);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  };
  </script>
  
  <style>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }
  .el-menu-demo {
    background-color: transparent;
    border: none;
  }
  .el-main {
    padding: 20px;
  }
  </style>
  